<template>
  <div class="component_wrap">
    <LssEditor v-model="editorHtml" :uploadImage="uploadImage" :uploadVideo="uploadVideo" />
    <div class="val-txt">输入的值：{{ editorHtml }}</div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'

const editorHtml = ref('')

const uploadImage = async (file: File) => {
  const formData = new FormData()
  formData.append('file', file)

  try {
    const response = await axios.post('/api/upload-image', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    return { url: response.data.url }
  } catch (error) {
    console.error('Upload image failed:', error)
    throw error
  }
}

const uploadVideo = async (file: File) => {
  const formData = new FormData()
  formData.append('file', file)

  try {
    const response = await axios.post('/api/upload-video', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    return { url: response.data.url }
  } catch (error) {
    console.error('Upload video failed:', error)
    throw error
  }
}
</script>
